<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>应急事件处理_新建事件界面</title>
         <!-- date css -->
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/daterangepicker.css" />
   		<!-- date css -->
   		<!-- date javascript -->
		<script src="<%=basePath%>jclient/javascript/public/jquery.min.js"></script>
        <script src="<%=basePath%>jclient/javascript/public/bootstrap.min.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/moment.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/daterangepicker.js"></script>
		 <!-- date javascript -->  
	 	<!-- select -->
   		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/style.css" type="text/css" />
   		<link href="<%=basePath%>jclient/css/public/select.css" rel="stylesheet" type="text/css" />
 		<script type="text/javascript" src="<%=basePath%>jclient/javascript/jslib/select-ui.min.js"></script>
   		<!-- select -->
   		<style type="text/css">
   		.daterangepicker{
			z-index: 9999;
			}
		#xjTab tr{height: 40px;}
		#xjTab tr td{padding: 0 10px;}
		.rstyle{
		   width: 100px;padding-right: 20px;text-align: right;
		}
   		</style>
  <script type="text/javascript">
   $(document).ready(function() {
       $('.begindate').val(moment().format('YYYY-MM-DD'));
				$('.begindate').daterangepicker({ singleDatePicker: true }, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
       }); 
        $("#flbz").click(function(){
					  $(".tip").fadeIn(200);
					  });
					  $(".tiptop a").click(function(){
					  $(".tip").fadeOut(200);
		});
		// 日期选择
			    $('#cxdate').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
				$('#cxdate').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                }); 
                 $("#sjEditdiv .tiptop a").click(function(){$("#sjEditdiv").fadeOut(200);});
		
    });
    function dealSJ(val1){$("#sjEditdiv").fadeIn(200);}
  </script>
  </head>
<body style="background-color: #FFFFFF;width: 100%;height: 100%;" >
    <div class="tools" style="margin-top: 10px;padding: 0 10px;">
       <div class="controls" style="width:280px;float: left;">
			<div style="width:60px;float: left;height: 30px;line-height: 30px;">
				<label>事件时间：</label>
			</div>
			<div class="input-group date datetime">
				<input id="cxdate" class="begindate form-control input-sm" size="16" type="text" value="" >
				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
			</div>
		</div>
		<div style="width:80px;float: left;height: 30px;line-height: 30px;padding-left:20px;">
			<label>事件名称：</label>
		</div>
	    <div style="width:410px;float: left;">
         <input name="" type="text" class="scinput" style="position: relative;top: -3px;"/>&nbsp;&nbsp;&nbsp;&nbsp;<input name=""  style="position: relative;top: -3px;" type="button" class="scbtn" value="查询"/>
       </div>   
	    <ul class="toolbar1">  
	         <li onclick="dealSJ('2012年8月23日关于于桥水库蓝藻中度暴发事件');"><span><img src="<%=basePath%>jclient/css/public/images/t01.png" style="position: relative;top: -7px;"/></span>添加</li>
	   		 <li ><span><img src="<%=basePath%>jclient/css/public/images/t03.png" style="position: relative;top: -7px;"/></span>删除</li>
	    </ul>
    </div>
    <table class="tablelist" style="width: 100%;">
    	<thead>
    	<tr>
	        <th width="4%"><input name="" type="checkbox" value="" checked="checked"/></th>
	        <th width="5%">编号<i class="sort"><img src="<%=basePath%>jclient/css/public/images/px.gif" /></i></th>
	        <th width="50%">事件名称</th>
	        <th width="16%">事件类型</th>
	        <th width="15%">事件时间</th>
        </tr>
        </thead>
        <tbody>
	        <tr>
		        <td><input name="" type="checkbox" value="" /></td>
		        <td>1</td>
		        <td>2012年8月23日关于于桥水库蓝藻中度暴发事件</td>
		        <td>蓝藻中度暴发</td>
		        <td>2012-08-25</td>
	        </tr> 
	        <tr>
		        <td><input name="" type="checkbox" value="" /></td>
		        <td>2</td>
		        <td>....................................................</td>
		        <td>......</td>
		        <td>2012-08-23</td>
	        </tr> 
         </tbody>
    </table>
  <!--新建事件-->
<div id="sjEditdiv" class="tip" style="left:50%;margin-left:-400px; width: 720px;height:440px;z-index: 100;top: 10px;border: 1px solid #cccccc;">
<div class="tiptop" ><span>新建事件</span><a></a></div>
      <div style="overflow-y: scroll;height:398px; ">
			    	<table id="xjTab" border="0" cellpadding="0" cellspacing="0"> 
			    		<tr>
			    		    <td class="rstyle">
			    				记录人
			    			</td>
			    			<td >
			    				<input type="text" class="scinput">
			    			</td>
			    			<td align="right" style="width: 230px;padding-right: 20px;">
			    				记录时间
			    			</td>
			    			<td >
			    				<div class="controls" style="width:150px;">
									<div class="input-group date datetime">
										<input id="begindate1" class="begindate form-control input-sm" size="16" type="text" value="">
										<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
									</div>
								</div>
			    			</td>
			    		</tr>
			    		<tr>
			    				<td class="rstyle">
			    						事件时间
			   					</td>
			   					<td>
			    						<div class="controls" style="width:150px;">
											<div class="input-group date datetime">
												<input id="begindate2" class="begindate form-control input-sm" size="16" type="text" value="">
												<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
											</div>
										</div>
			   					</td>
			   					<td align="right" style="width: 230px;padding-right: 20px;">
			    						影响供水程度
			   					</td>
			   					<td>
			    						<input type="text" name="impact" class="scinput"/> 
			   					</td>
			    		</tr>
			    		<tr>	
								<td class="rstyle">
			    						事件地点
			    				</td>
			    				<td colspan="3" >
			    						<input  type="text" name="site" class="scinput" style="width: 550px;"/>
			    				</td>
			    		</tr>
			    		<tr>
			    					<td class="rstyle">
			    						事件概述
			    					</td>
			    					<td colspan="3">
			    						<textarea rows="4"  class="scinput" style="width: 550px;"></textarea>
			    					</td>
			  			</tr>
			    		<tr>
			    					<td class="rstyle" >
			    						先期处理
			    					</td>
			    					<td colspan="3">
			    						<input type="text" name="dispose" class="scinput" style="width: 550px;">
			    					</td>
			    		</tr>
			    		<tr>
			    		    <td rowspan="4" class="rstyle">
			    						评价结果
			    					</td>
			    					<td align="left"   colspan="3" >
			    						<span style="display: inline-block;margin: 0 20px;height: 30px;padding-top: 5px;color:#3EAFE0;">事件分析：</span><input type="text" name="analyze" class="scinput"/>
			    					</td>
			    		</tr>
			    					<tr>
			    					<td  colspan="3">
			    						<span style="float: left;display: inline-block;margin: 0 20px;height: 30px;padding-top: 5px;color:#3EAFE0;">事件分级：</span>
			    							<div style="width: 150px;float: left;">
				    						 <div class="uew-select" style="text-align: left;width: 150px;"><div style="width: 73px;" class="uew-select-value ue-state-default"><em class="uew-select-text">Ⅰ</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
							                   <select style="width: 73px;" class="select3">
												    <option>Ⅰ</option>
												    <option>Ⅱ</option>
											    </select>
										   </div>
									     </div>
			    						<span id="flbz" class="eclipseBtn" style="float: left;height:25px;line-height:25px; display: inline-block;" >分级标准</span>
			    					</td>
			    		 			</tr>
			    		 <tr>
			    					<td align="left"   colspan="3">
			    						<span style="float: left;display: inline-block;margin: 0 20px;height: 30px;padding-top: 5px;color:#3EAFE0;">报警级别：</span>
			    						<div style="width: 150px;float: left;">
				    						 <div class="uew-select" style="text-align: left;width: 150px;"><div style="width: 73px;" class="uew-select-value ue-state-default"><em class="uew-select-text">Ⅰ</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
							                   <select style="width: 73px;" class="select3">
												    <option>Ⅰ</option>
												    <option>Ⅱ</option>
											    </select>
										   </div>
									     </div>
			    					</td>
			    		</tr>
			    	   <tr>
			    					<td align="left"   colspan="3">
			    						<span style="float: left;display: inline-block;margin: 0 20px;height: 30px;padding-top: 5px;color:#3EAFE0;">响应级别：</span>
			    						 <div style="width: 150px;float: left;">
				    						 <div class="uew-select" style="text-align: left;width: 150px;"><div style="width: 73px;" class="uew-select-value ue-state-default"><em class="uew-select-text">Ⅰ</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
							                   <select style="width: 73px;" class="select3">
												    <option>Ⅰ</option>
												    <option>Ⅱ</option>
											    </select>
										   </div>
									     </div>
			    					</td>
			    		</tr>
			    		<tr>
			    					<td class="rstyle">
			    						事件等级
			    					</td>
			    					<td colspan="3"  >
			    					    <div class="uew-select" style="text-align: left;width: 200px;position: relative;left:20px;"><div style="width: 73px;" class="uew-select-value ue-state-default"><em class="uew-select-text">Ⅰ</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
						                   <select style="width: 73px;" class="select3">
											    <option>Ⅰ</option>
											    <option>Ⅱ</option>
										    </select>
									   </div>
			    					</td>
			    		</tr>
			    		<tr>
			    					<td class="rstyle">
			    						事件报告
			    					</td>
			    					<td style="margin: 30px 0;" colspan="3">
									  <div style="width: 150px;float: left;position: relative;left:20px;">
				    						 <div class="uew-select" style="text-align: left;"><div style="width: 120px;" class="uew-select-value ue-state-default"><em class="uew-select-text">事件初次报告</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
							                   <select style="width: 120px;" class="select3">
													<option>事件初次报告</option>
												    <option>事件阶段报告</option>
												    <option>事件总结报告</option>
											    </select>
										   </div>
									     </div>
			    					  <span class="eclipseBtn"  style="display: inline-block;float: left;">上传</span>
			    					</td>
			    				</tr>
			    				<!-- -
			    				<tr >
			    					<td class="rstyle">
			    						其他附件
			    					</td>
			    					<td colspan="3" style="padding-left: 40px;">
			    					    <span style="position: relative;left: -20px;">
			    					    <a href="##">文档</a>&nbsp;&nbsp;<a >表格</a>&nbsp;&nbsp;<a >图片</a>&nbsp;&nbsp;<a >视频</a>&nbsp;&nbsp;<a >音频</a>
			    						</span>
			    					</td>
			    				</tr>
			    				 -->
			    				<tr>
			    				<td colspan="4" align="center">
			    				   <input name=""  style="position: relative;top: -3px;" type="button" class="scbtn" value="保存"/>
			    				</td>
			    				</tr>
			    			</table>
		</div>
   </div>
  <!--新建事件-->  
   
  </body>
</html>
